<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:display="http://www.w3.org/1999/xhtml"
      xmlns:div.display="http://www.w3.org/1999/xhtml" xmlns:row.display="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>monitoring</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link th:href="@{/vendor/metisMenu/metisMenu.min.css}" rel="stylesheet">

    <!-- Custom CSS -->
    <link th:href="@{/dist/css/sb-admin-2.css}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link th:href="@{/vendor/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">

    <link th:href="@{/vendor/datepicker/datepicker3.css}" rel="stylesheet" type="text/css">

    <!--bootstrap-table CSS-->
    <link th:href="@{vendor/bootstrap/css/bootstrap-table.css}" rel="stylesheet" type="text/css">

    <!-- jQuery -->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script th:src="@{/vendor/metisMenu/metisMenu.min.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script th:src="@{/dist/js/sb-admin-2.js}"></script>

    <script th:src="@{/vendor/datepicker/bootstrap-datepicker.js}"></script>

    <!--bootstrap-table JavaScript-->
    <script th:src="@{vendor/bootstrap/js/bootstrap-table.js}"></script>

    <script>
        $(function () {
            function queryParams(params) {
                var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    //                    limit: params.limit,   //页面大小
                    //                    offset: params.offset,  //页码
//                    custcode: $("#custcode").val(),
                    //                    statu: $("#txt_search_statu").val()
                };
                return temp;
            }

            $('#tb_workflowinfo').bootstrapTable({
                url: '/workflowInfo_Search',         //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "bpm_no",                     //每一行的唯一标识，一般为主键列
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'bpm_no',
                    title: '贷款编号'
                }, {
                    field: 'processid',
                    title: '运行ID'
                }, {
                    field: 'taskname',
                    title: '任务名称'
                }, {
                    field: 'initiatorname',
                    title: '启动人'
                },{
                    field: 'templatename',
                    title: '模板名称'
                },{
                    field: 'state',
                    title: '状态'
                },{
                    field: 'createtime',
                    title: '创建时间'
                } ],

                onClickRow:function (row) {
                    $("#bpm_no").val(row.bpm_no);
                    $("#templatename").val(row.templatename);
                    $("#state").val(row.state);
                }

            });

            $('#btn_delete').click(function () {
                var delete_rows = $('#tb_workflowinfo').bootstrapTable('getAllSelections');
                var json = [];
                for(var i=0;i<delete_rows.length;i++){
                    json.push(delete_rows[i].bpm_no);
                }
                if(json == null || json == ""){
                    alert("请选择要删除的数据行");
                }else{
                    $.ajax({
                        type: "POST",
                        url: "/deleteWorkflowInfo",
                        contentType : "application/json",
                        dataType: "json",
                        data: JSON.stringify(json),
                        async: false,
                        success: function(result){
                            $('#tb_workflowinfo').bootstrapTable("refresh",{
                                silent : true
                            });
                            alert(result.message);
                        },
                        error : function (result) {
                            alert(result.message);
                        }
                    });
                }
            });
        })
    </script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<div  id ="applySearch"  >
    <div class="col-lg-12" >
        <form   name="monitoring" th:action="@{/monitoring}"  method="post" th:object="${monitoring_entity}" >
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">工作流信息</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">

                        <div class="row" >
                            <div class="col-lg-2">
                                <label >贷款编号：</label>
                            </div>
                            <div class="col-lg-4">
                                <input id="bpm_no" disabled  type="text" class="form-control">
                            </div>
                        </div>

                        <div class="row" >
                            <div class="col-lg-2">
                                <label >模板名称：</label>
                            </div>
                            <div class="col-lg-4">
                                <input  id="templatename" disabled type="text" class="form-control">
                            </div>
                        </div>

                        <div class="row" >
                            <div class="col-lg-2">
                                <label >状态：</label>
                            </div>
                            <div class="col-lg-4">
                                <input  id="state" disabled type="text" class="form-control">
                            </div>
                        </div>




                    </div>
                </div>
            </div>

            <hr/>

            <div class="panel panel-default">
                <div class="panel-heading">工作流列表</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="toolbar" class="btn-group">
                                <button id="btn_delete" type="button" class="btn btn-default">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                                </button>
                            </div>
                            <table id="tb_workflowinfo"></table>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>




</body>
</html>